<template>
  <div class="tabbar">
      <div class="left">
        <div class="store">
          <img src="../../assets/images/icon2.png" alt="">
					<p>店铺</p>
        </div>
        <div class="bor"></div>
        <div class="collect">
          <img src="../../assets/images/star.png" alt="">
					<p>收藏</p>
        </div>
      </div>
      <div class="rightBtn fr">
				<button @click="$store.state.addCar=true" class="mui-btn mui-btn-primary">
					加入购物车
				</button>
        
				<button type="button" class="mui-btn mui-btn-warning">
					立即购买
				</button>
      </div>
      <transition name="addCar">
        <add-car v-show="$store.state.addCar"></add-car>
      </transition>
      
  </div>
</template>

<script>
import addCar from "@/components/tabbarshop/addCar.vue"
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  },

  components:{
    addCar
  }
}
</script>

<style lang='less'>
.tabbar{
  width:100%;
  height:62px;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  position: fixed;
  bottom:0;
  left:0;
  z-index: 999;
  .left{
    float: left;
    .store{
      margin: 13px 15px 13px 25px;
    }
    .collect{
      margin: 13px 15px;
    }
    .bor{
      height:23px;
      width: 1px;
      background: #E7E7E7;
      margin-top:19.5px;
    }
    div{
      float: left;
      width:50px;
      text-align: center;
      img{
        width:24px;
        height:24px;
        display: inline-block;
      }
      p{
        font-size: 9px;
        color: #333;
        line-height: 12px;
      }
    }
  }
  .rightBtn{
    button{
      border-radius: 100px;
      width:80px;
      height:49px;
      margin-top: 6.5px;
      border: none;
      font-size: 12px;
    }
    button:nth-child(1){
      background: #003A9B;  
    }
    button:nth-child(2){
      background: #FDDF00 ;
      color: #000;
      margin-right: 5px;
    }
  }
}
@media screen and (max-width: 375px) {
    .tabbar .rightBtn button{
      width:70px;
    }
    .tabbar .left div{
      width:40px;
    }
}


.addCar-enter,.addCar-leave-to{
  opacity: 0;
}
.addCar-enter-active,.addCar-leave-active{
  transition: all 0.3s linear;
}
.addCar-enter-to,.addCar-leave{
  opacity: 1;
}
</style>
